<template>
  <div class="authorize-page-divider">
    <span>共 {{conf.maxPageNum}} 页， {{conf.total}} 条数据</span>
    <div :class="{disabled: conf.currentPageIndex <= 0}" @click="setCurrentPage(-1)">上一页</div>
    <ul>
      <li
        :class="{active: item === conf.currentPageIndex, btn: item !== undefined}"
        v-for="(item, index) in pageDividerConf"
        :key="index"
        @click="item !== undefined && (conf.currentPageIndex = item)"
      >{{item === undefined ? "…" : (item + 1)}}
      </li>
    </ul>
    <div :class="{disabled: conf.currentPageIndex >= conf.maxPageNum - 1}" @click="setCurrentPage(1)">下一页</div>
  </div>
</template>
<script>
import getList from "../utils/page";
export default {
  name: 'popup',
  props: ["conf"],
  computed: {
    pageDividerConf() {
      return getList(this.conf.currentPageIndex, this.conf.maxPageNum);
    },
  },
  methods: {
    setCurrentPage(oper = 0){
      const {maxPageNum} = this.conf;
      let {currentPageIndex} = this.conf;
      currentPageIndex = currentPageIndex + oper;
      if (currentPageIndex < 0) currentPageIndex = 0;
      if (currentPageIndex >= maxPageNum) currentPageIndex = maxPageNum - 1;
      this.conf.currentPageIndex = currentPageIndex;
    },
  },
}
</script>
<style scoped>
  .authorize-page-divider {
    flex: 0 0 auto;
    display: flex;
    padding: 20px;
    justify-content: flex-end;
    font-size: 12px;
  }

  .authorize-page-divider > span {
    padding: 0 10px;
  }

  .authorize-page-divider > div {
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
  }
  .authorize-page-divider > div.disabled{
    color: #999;
    cursor: auto;
  }
  .authorize-page-divider > ul {
    display: flex;
  }

  .authorize-page-divider > ul > li {
    text-align: center;
    width: 20px;
    height: 20px;
    border: 1px solid #cccccc;
    margin: 0 3px;
    cursor: pointer;
    user-select: none;
    line-height: 12px;
    justify-content: center;
  }

  .authorize-page-divider > ul > li.btn {
    line-height: 18px;
  }

  .authorize-page-divider > ul > li.active {
    border: 1px solid red;
    color: #fff;
    background-color: red;
  }
</style>
